<template>
	<view>
		<view class="warnings" v-if="strNums === 4">
			<image src="@/static/images/error.png" mode=""></image>
			<text>特殊延期可能导致年审梯保养存在违规风险，请谨慎操作</text>
		</view>
		<view class="wrap_edit">
			
			<view class="top_text">
				<view class="text_L">
					<image src="@/static/images/maintain/planicon.png" mode=""></image>
					<text>任务:</text>
				</view>
				<view class="text_R">
					<text>{{objInfo.planCheckName || "--"}}</text>
					<text class="text_year">{{objInfo.auditType === 2?'年审梯':'非年审梯'}}</text>
					<text>{{objInfo.buildingAddress || "--"}}</text>
				</view>
			</view>
			
			<view class="calendar_tp">
				<view class="calendar_title" >
					<view class="">{{['延期保养','提前保养','提前保养','特殊延期'][strNums-1]}}日期</view>
					<view class="" @click="calendarClick">
						<text :class="[{actTextRed:subMitDate && strNums === 4,actTextblue:subMitDate && strNums !== 4}]" >{{subMitDate || '请选择日期'}} </text>
						<!-- /static/images/repairFitting/signMonth.png -->
						<image v-if="strNums === 4 && subMitDate" src="/static/images/repairFitting/signMonthRed.png" mode=""></image>
						<image v-else-if="strNums !== 4 && subMitDate" src="/static/images/repairFitting/signMonth.png" mode=""></image>
						<image v-else src="/static/images/repairFitting/signMonthR.png" mode=""></image>
						
					</view>
				</view>
				<view class="calendar_pland" v-if="subMitDate" >
					<view class="pland_date">
						<view class="">
							<text>初始计划</text>
							<text>{{plandInitDate}}</text>
						</view>
						<view class="" :style="{display:plandCurrDate?'unset':'none'}">
							<text>当前计划</text>
							<text>{{plandCurrDate}}</text>
						</view>
					</view>
					<view class="pland_change">
						<view class="">
							<text>本次调整与初始计划日期相比:</text>
							<text :style="{color:strNums === 4 ? '#e02020':'#0091ff'}">
								<!-- {{textStateOne ?'整体提前':'整体延期'}}{{initDays || '无变化'}} -->
								{{initDays?(textStateOne?'整体提前':'整体延期'):'日期无变化' }}{{initDays||''}}
							</text>
						</view>
						<view class="" :style="{visibility:plandCurrDate?'unset':'hidden'}">
							<text>本次调整与当前计划日期相比:</text>
							<text :style="{color:strNums === 4 ? '#e02020':'#0091ff'}">
								{{textStateTwo?'相对提前':'相对延期'}}{{currDays || '日期无变化'}}
							</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="calendar_reason">
				<view class="reason_remarks">
					<view class="titleMax">原因与证明</view>
					<view class="title">日期调整原因<text style="color:red;">*</text></view>
					<view class="remarks">
						<textarea
							type="textarea"
							v-model="objData.defertDesc"
							height="208rpx"
							placeholder="请输入备注内容"
							placeholder-class="textare"
							style="font-size: 28rpx;height:208rpx; z-index: 99;"
							maxlength="300"
						/>
						<view class="length">{{ objData.defertDesc.length >= 300?'300/300':objData.defertDesc.length + '/300' }}</view>
					</view>	
				</view>
				
				<view class="reason_img">
					<view class="title">调整证明
						<text style="color:red;">*</text>
						<text style="color: #999;font-size: 24rpx;">(最多可上传9张图片)</text>
					</view>
					<view class="parts_img">
						<!-- :parentStyle = "'16rpx'"
						:delayTypes="true" -->
						<imageDragSort 
						max="9" 
						:list="imgUrls" 
						:delayTypes="false"
						:isVideoShow="false"
						@changeList="changeImg"
						tips="上传图片"
						></imageDragSort>
					</view>	
				</view>
			</view>
			
		</view>
		<!-- <view  style="height: 100rpx;" ></view> -->
		<view class="BA_item_botm" >
			<view class="botm" @click="submitComfire">确定</view>
		</view>
 
		<neil-modal 
			:show="showTaskExistsTipsPoup" 
			title="提示" 
			@close="closeModal" 
			:show-cancel="false"
			align="center"
			confirm-text="我知道了" >
			<view>
				<view class="taskExistsPopupTitle">电梯该日期已存在任务:</view>
				<scroll-view scroll-y="true" class="taskExistsView">
					<div class="taskExistsPopupContent" 
						v-for="(tagsStr,idx) in splitProcessor(taskExistsPopupData.planTypeNames,'%')" :key="idx">
						<view class="label">保养:</view> 
						<view class="data">
							<view class="tag" v-for="tag in splitProcessor(tagsStr,',')" :key="tag">
								{{ tag }}
							</view>
						</view>
					</div>
				</scroll-view>
			</view>
		</neil-modal>
		
		<!-- 日历延期弹窗 -->
		<uni-popup ref="calendarPopup" :mask-click="true" type="bottom" @change="changePopUp">
			<view class="calendarEdit">
				<view class="edit_bor" @click="$refs.calendarPopup.close()"> <view class="down-btn"></view> </view>
				<view class="edit_select">
					<view class="select_tit">选择日期</view>
					<view class="select_text">
						<view class="">{{['延期保养','提前保养','提前保养','特殊延期'][strNums-1]}}日期</view>
						<view :style="{color:strNums === 4 ? '#e02020':'#0091ff'}" >{{currDate || ''}}</view>
					</view>
					<view class="select_plan" v-if="actState">
						<view class="">
							<view class=""><text style="color: #666666;">初始计划</text>:{{plandInitDate}}</view>
							<view class="">本次调整与初始计划日期相比:</view>
							<view class="" v-if="currDays">本次调整与当前计划日期相比:</view>
						</view>
						<view class="">
							<view class="" :style="{visibility:plandCurrDate?'unset':'hidden'}">
								<text style="color: #666666;">当前计划</text>:
								<text>{{plandCurrDate}}</text> 
							</view>
							<view class="" :style="{color:strNums === 4 ? '#e02020':'#0091ff'}">
								<text>{{initDays?(textStateOne?'整体提前':'整体延期'):'日期无变化' }}{{initDays||''}} </text>
								<!-- <text> {{initDays || '无变化'}} </text> -->
							</view>
							<view class="" :style="{color:strNums === 4 ? '#e02020':'#0091ff'}" v-if="currDays">
								<text >{{textStateTwo?'相对提前':'相对延期'}}{{currDays || '日期无变化'}}</text>
							</view>
						</view>
					</view>
					<view class="select_LR">
						<view class="L_text"><text style="color: #6236ff;">休</text>:法定节假日</view>
						<view class="R_radio">
							<view class=""><text style="color: #fa6400;">休</text>:只显示考勤休息日</view>
							<view class="">
								<evan-switch :size="20" v-model="checkeds" @change="changeSwitch" />
							</view>
						</view>
					</view>	
					
				</view>
				<view class="select_yearM">
					<!-- <view class="yearM_tit">{{curListArr[curIndex].years+"年"+curListArr[curIndex].months+"月"}}</view> -->
					<view class="yearM_tit">{{yearMonthTitle || ''}}</view>
					
					<view class="yearM_week">
						<view class="weeks" v-for="(item,i) in weeks" :key="i">{{item}}</view>
					</view>	
				</view>
				<scroll-view scroll-with-animation="true" :scroll-anchoring="true" scroll-y="true" class="scrollY" @scroll="handlScroll" :scroll-top="scrolltops" @scrolltolower="handlScrolltolower" @scrolltoupper="handlScrolltoupper" >
					
					<view style="width: 680rpx; margin:0 auto;">
						<calendarYear class='calendarYears' ref="calendarYear" :datalistYear='datalistYear' :holidayState='holidayState' :strNums="strNums" @selectDays="selectDays"/>
					</view>
					
				</scroll-view>
				<view style="height: 100rpx;" ></view>
				<view class="BA_item_botm calendar_btt" >
					<view class="botm" @click="submitYearDate">确定</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 确认对话框start -->
		<uni-popup ref="deferredPopup">
			<view class="popup">
				<view class="title">{{['延期保养','提前保养','提前保养','特殊延期'][strNums-1]}}</view>
				<view class="content">
					<view class="delay_detail">
						<text style="font-size: 24rpx;">任务:</text>
						<text style="font-size: 24rpx;">{{objInfo.planCheckName || "--"}}</text>
						<text class="text_year">{{objInfo.auditType === 2?'年审梯':'非年审梯'}}</text>
						<text style="font-size: 24rpx;">{{objInfo.buildingAddress || "--"}}</text>
					</view>
					<view class="delay_date">
						<view class="date_text">此任务将调整至</view>
						<view class="date_s"><text>{{currDate || ''}}</text>执行</view>
					</view>
				</view>
				<view class="bottom">
					<view @click="$refs.deferredPopup.close()">取消</view>
					<view class="comfire" @click="rescueComfire">确认</view>
				</view>
			</view>
		</uni-popup>
		<!-- 确认对话框end -->
		<previewMedia ref="previewMedia"></previewMedia>
	</view>
</template>

<script>
import imageDragSort from '@/components/image-drag-sort/img-and-video.vue';
import evanSwitch from '@/components/partsList/evan-switch.vue';
import calendars from '@/utils/calendar.js';
import {
	throttles,
	debounce
} from '@/utils/utils.js';
import calendarYear from './components/calendarYear.vue';
import {getPlanAndSignDates,annualListLogs,addAnnualSave} from '@/apis/project.js';
import {formatSeconds} from '@/utils/utils.js';
import dayjs from 'dayjs';
import tags from '@dcloudio/vue-cli-plugin-uni/packages/postcss/tags';
export default {
	components:{
		imageDragSort,
		calendarYear,
		evanSwitch
	},
	data() {
		return {
			objData:{
				defertDesc:'',
				defertImg:'',
				planDate:'',
				planId:'',
				oldPlanDate:''
			},
			taskExistsPopupData:{},
			showTaskExistsTipsPoup: false,
			yearMonthTitle:'',
			imgUrls:[],
			checkeds:false,
			weeks: ['一', '二', '三', '四', '五', '六', '日'],
			datalistYear:[],// 日历数据
			upper:0,// 往上滚动锁
			lower:0,// 往下滚动锁
			triggerTwoUp:0,
			triggerTwoDown:0,
			objInfo:{},// 小区信息
			actState:false,// 点击日历显示
			strNums:1,
			scrolltops:0,
			currDate:'',// 当前选择日期
			plandCurrDate:'',// 当前计划日期
			plandInitDate:'',// 初始计划日期
			initDays:'',// 天数
			currDays:'',// 天数
			subMitDate:'',// 最终选择的日期
			holidayState:false,// 考勤日状态
			curYears:dayjs().year() + '年' + (1 + dayjs().month()) + '月',
			textStateOne:false,// 用于区分初始计划选择后日期是否是提前和延后
			textStateTwo:false,// 用于区分当前计划选择后日期是否是提前和延后
			curIndex:0,
			curIndexMonth:1,
			curListArr:[],
			initCount:1,
		};
	},
	watch:{
		datalistYear:{
			handler:function(val,oldVal) {
				this.initObserver();
			},
			deep:true
		}
	},
	async onLoad(opt) {
		let obj = JSON.parse(opt.needObj) || {};
		if (Object.keys(obj).length > 0) {
			this.objData.planId = obj.planId;
			this.objData.oldPlanDate = obj.planDate + ' 00:00:00';
			this.objInfo = obj;
			this.strNums = Number(opt.nums);
				
			let str = '';
			if (Number(opt.nums) === 1) {// 非年审梯
				str = '延期保养';
			}
			if (Number(opt.nums) === 2) {// 非年审梯
				str = '提前保养';
			}
			if (Number(opt.nums) === 3) {// 年审梯
				str = '提前保养';
			}
			if (Number(opt.nums) === 4) {// 年审梯
				str = '特殊延期';
			}
			uni.setNavigationBarTitle({
				title: str
			});
			let resData = await this.initGetListLogs(this.objData.planId);
			let planDate = (resData[0].planDate || '').substring(0,10).replaceAll('-','/');
			let yearR = new Date().getFullYear();
			let fYear = new Date(planDate).getFullYear(); 
			if (fYear === yearR + 1) { // 加载两年数据
				this.lower = 1;
				for (let i = yearR; i <= fYear;i++) {
						 this.getAllYearDay(i,2,1,2);
				}
			} else {
				this.getAllYearDay(yearR,2,1);
			}
		}
		// this.getAllYearDay(new Date().getFullYear(),2,1)
	},
	onReady() {
		this.initObserver();
	},
	methods: {
		// 初始检测dom
		initObserver() {
			var _this = this;
			this.$nextTick(()=>{
				var formatMonthTitle = (date) => {
					if (!(date instanceof Date)) {
						date = new Date(date);
					}
					return ''.concat(date.getFullYear(), '\u5E74').concat(date.getMonth() + 1, '\u6708');
				};
				var contentObserver = uni.createIntersectionObserver(this,{
					thresholds:[0, 0.1, 0.9, 1],
					observeAll:true
				});
				contentObserver.relativeTo('.scrollY');
				contentObserver.observe('.calendarYears .year_block', function(res) {
					if (res.boundingClientRect.top <= res.relativeRect.top ) {
						_this.yearMonthTitle = formatMonthTitle(res.dataset.date);
					} else {
						// if(_this.initCount){//处理第一次自动滚动时出现的日历不准bug
						// 	_this.initCount = 0
						// 	console.log("ccccccccccc",res,_this.initCount)
						// 	_this.yearMonthTitle = "".concat(new Date().getFullYear(), "\u5E74").concat(new Date().getMonth() + 1, "\u6708")
						// }
					}
				});
				console.log('contentObserver',contentObserver);
			});
		},
		// 图片上传
		changeImg(imgArr = []) {
			this.imgUrls = imgArr;
		},
		handlScroll(e) {
			// 这里由于滚动兼容性问题先注释
			// let scrollTop = e.detail.scrollTop*2/750
			// let sNum = Math.ceil(scrollTop)
			// let iNum = Number(e.detail.scrollTop/365).toFixed(0)
			// if(iNum < this.curListArr.length){
			// 	this.curIndex = iNum
			// }
			// console.log("滚动l",sNum,iNum,e,this.curIndex,this.curListArr.length)
			// this.onScroll(e)
			// this.onStopScroll(e)
		},
		initGetListLogs(planId = '') {
			return new Promise((resolve,reject)=>{
				annualListLogs({
					planId,
					size:1,
					current:1,
				}).then(res=>{
					if (res.code === 200) {
						let list  = res.data.records || [];
						resolve(list);
					}
				});
			});
		},
			
		// 休息日开关
		changeSwitch(e) {
			this.holidayState = !this.holidayState;
		},
		// 
		calendarClick() {
			this.$refs.calendarPopup.open();
			let sYears = new Date().getFullYear();
			let sMonth = new Date().getMonth();
			// wx.createIntersectionObserver().relativeToViewport().observe('#k10', (res) => {
			// 	console.log("createIntersectionObserver",res)
			// })
				
			if (this.objInfo.planDate) {// 跨年滚动到对应月份
				let cuYears = new Date(this.objInfo.planDate).getFullYear();
				let cuMonth = new Date(this.objInfo.planDate).getMonth();
				if (cuYears === sYears + 1) {
					sYears = cuYears;
					sMonth = cuMonth;
				}
			}
			this.yearMonthTitle = '';
			setTimeout(()=>{
				const query = uni.createSelectorQuery().in(this.$refs.calendarYear);
				query.select('#k' + sYears + sMonth).boundingClientRect(data => {
					this.scrolltops = data.top - 280;
					// this.initCount = data.top
					// this.yearMonthTitle = "".concat(new Date().getFullYear(), "\u5E74").concat(new Date().getMonth() + 1, "\u6708")
				}).exec();
			},800);
		},
		// 
		changePopUp(e) {
			console.log('eeee',e);
				
			if (!e.show) {
				this.scrolltops = 0;
				this.initCount = 0;
			}
		},
		onScroll:throttles(function(e) {
			console.log('开始了',e);
		}),
		onStopScroll:debounce(function(e) {
			// 根据停止的位置 算出当前位置属于哪个节点
			let scrollTop = e[0].detail.scrollTop * 2 / 700;
			let s = Math.ceil(scrollTop);
			console.log('停止了',s,e);
			// wx.createIntersectionObserver().relativeToViewport().observe('#k'+s, (res) => {
			// 	console.log("看你的",res)
			// })
		}),
		// 滚动到顶部
		handlScrolltoupper(e) {
			console.log('handlScrolltoupper',e);
			this.triggerTwoUp += 1;
			if (this.triggerTwoUp > 1) {
				this.upper += 1;
				if (this.upper === 1 ) {
					let curYear = new Date().getFullYear();
					this.getAllYearDay(String(--curYear),1);
				}
			}
		},
		// 滚动到底部
		handlScrolltolower(e) {
			console.log('handlScrolltolower',e);
			this.triggerTwoDown += 1;
			if (this.triggerTwoDown > 1) {
				this.lower += 1;
				if (this.lower === 1 ) {
					let curYear = new Date().getFullYear();
					this.getAllYearDay(String(++curYear),2);
				}
			}
		},
			
		// 初始加载全年日历 参数type：滚动时区分上下年 initNums:初始加载当前年 towYear：加载两年
			 getAllYearDay(years,type,initNums,towYear) {
			var arr = [];
			let curDate = new Date();
			let yearR = curDate.getFullYear();
			let monthR = curDate.getMonth() + 1;
			let dayR = curDate.getDate();
			let curArr = [];
				 for (let i = 1; i <= 12; i++) {
					  arr.push(calendars.getMonthList(new Date(years + '/' + i + '/01'))); 
					  curArr.push({years,months:i});
				 }
				 if (type === 1) {
					 yearR -= 1;
					 this.datalistYear.unshift({
					 	year:years,
					 	yearDay:arr,
					yearMonthArr:curArr
					 });
					 this.curListArr.unshift(...curArr);
				 } else {
					 yearR += 1;
					 this.datalistYear.push({
					 	year:years,
					 	yearDay:arr,
					yearMonthArr:curArr
					 });
					 this.curListArr.push(...curArr);
				 }
				 if (initNums === 1) {// 初始获取当前年
				yearR = curDate.getFullYear();
				 }
				
			let yearStart = dayjs(yearR + '/' + monthR + '/' + dayR).startOf('year').format('YYYYMMDD');
			let yearsEnd = dayjs(yearR + '/' + monthR + '/' + dayR).endOf('year').format('YYYYMMDD');
				
			if (towYear === 2) {
				yearStart = dayjs(years + '/' + monthR + '/' + dayR).startOf('year').format('YYYYMMDD');
				yearsEnd = dayjs(years + '/' + monthR + '/' + dayR).endOf('year').format('YYYYMMDD');
			}
				
			this.initGetAllYear(yearStart,yearsEnd);
		},
		// 日历点击
		selectDays(item,yindex,index) {
			let cNums = new Date(item.date).getTime() / 1000;
			let  plandCurrDate = this.plandCurrDate;
			let  plandInitDate = this.plandInitDate;
			if (this.beforeToday(item.date)) {
				uni.showToast({
					title: '该日期不在调整范围',
					icon: 'none'
				});
				return;
			}
				
			if (!item.id) {// 点击日历空白
				return;
			}
				
			if (this.strNums === 1) {// 非年审梯 延期保养
				if (plandCurrDate) {
					// 选择时间小于等于当前计划时间不可选或者初始计划
					if (cNums <= new Date(plandCurrDate).getTime() / 1000) { 
						uni.showToast({
							title: '该日期不在调整范围',
							icon: 'none'
						});
						return;
					}
				}
				if (!plandCurrDate && plandInitDate) {
					if (cNums <= new Date(plandInitDate).getTime() / 1000) {
						uni.showToast({
							title: '该日期不在调整范围',
							icon: 'none'
						});
						return;
					}
				}
			}
				
			if (this.strNums === 2) {// 非年审梯 提前保养
				if (item.isSelect === 0) {
					uni.showToast({
						title: '该日期不在调整范围',
						icon: 'none'
					});
					return;
				}
					
				if (plandCurrDate) {
					// 提前保养不能大于当前计划时间
					if (cNums >= new Date(plandCurrDate).getTime() / 1000 ) { 
						uni.showToast({
							title: '该日期不在调整范围',
							icon: 'none'
						});
						return;
					}
				} else if (plandInitDate) {
					// 提前保养不能大于初始化时间
					if (cNums >= new Date(plandInitDate).getTime() / 1000 ) {
						uni.showToast({
							title: '该日期不在调整范围',
							icon: 'none'
						});
						return;
					}
				}
			}
				
			if (this.strNums === 3 ) {// 年审梯 提前保养
				if (item.isSelect === 0) {
					uni.showToast({
						title: '该日期不在调整范围',
						icon: 'none'
					});
					return;
				}
				if (plandCurrDate) {
					let cNumsInit = new Date(plandInitDate).getTime() / 1000;
					let cNumsCurr = new Date(plandCurrDate).getTime() / 1000;
					if (cNums < cNumsInit || cNums >= cNumsCurr) { // 提前保养只能是初始计划和当前计划之间的日期
						uni.showToast({
							title: '该日期不在调整范围',
							icon: 'none'
						});
						return;
					}
				}
			}
				
			if (this.strNums === 4) {// 年审梯 特殊延期保养
				if (plandCurrDate) {
					let currNums = new Date(plandCurrDate).getTime() / 1000;
					if (cNums <= currNums) {
						uni.showToast({
							title: '该日期不在调整范围',
							icon: 'none'
						});
						return;
					}
				}
				// 年审梯初次延期要大于1天
				if (plandInitDate && !plandCurrDate) {
					// let cInit = new Date(this.plandInitDate).getTime()/1000
					let tInit = (new Date(plandInitDate).getTime() + 24 * 60 * 60 * 1000) / 1000;
					if (cNums === tInit || cNums <= new Date(plandInitDate).getTime() / 1000) {
						uni.showToast({
							title: '该日期不在调整范围',
							icon: 'none'
						});
						return;
					}
				}
			}
				
			if (item.planTypeNames && item.otherMonth === 'nowMonth') {
				this.showTaskExistsTipsPoup = true;
				this.taskExistsPopupData = {
					planTypeNames : item.planTypeNames
				};
			}

			// console.log("日历点击",item,yindex,index)
			this.currDate = item.date;
			let iNum = 0,cNum = 0;
			if (this.plandInitDate) {// 计算初始计划相隔天数
				// 选择的日期大于初始计划日期
				if (new Date(item.date).getTime() / 1000 >= new Date(this.plandInitDate).getTime() / 1000) {
					iNum = new Date(item.date).getTime() / 1000 - new Date(this.plandInitDate).getTime() / 1000;
					this.textStateOne = false;// 这个状态上面有备注
				} else {
					iNum = new Date(this.plandInitDate).getTime() / 1000 - new Date(item.date).getTime() / 1000;
					this.textStateOne = true;
				}
				this.initDays = formatSeconds(iNum,0,false,1);
			}
			if (this.plandCurrDate) {// 计算当前计划相隔天数
				// 选择的日期大于当前计划日期
				if (new Date(item.date).getTime() / 1000 >= new Date(this.plandCurrDate).getTime() / 1000) {
					cNum = new Date(item.date).getTime() / 1000 - new Date(this.plandCurrDate).getTime() / 1000;
					this.textStateTwo = false;// 这个状态上面有备注
				} else {
					cNum = new Date(this.plandCurrDate).getTime() / 1000 - new Date(item.date).getTime() / 1000;
					this.textStateTwo = true;
				}
				this.currDays = formatSeconds(cNum,0,false,1);
			}
				
				 let yearData = JSON.parse(JSON.stringify(this.datalistYear));
				 for (let i = 0; i < yearData.length; i++) {// 年
				 	let yearDay = yearData[i].yearDay || [];
				 	for (let j = 0; j < yearDay.length; j++) {// 月
				 		let days = yearDay[j] || [];
					// if(yindex-1 === j){
					for (let c = 0; c < days.length; c++) {// 日
						if (days[c].date === item.date) {
							if (days[c].acts === 1) {
								days[c].acts = 0;
								this.actState = false;
							} else {
								days[c].acts = 1;
								this.actState = true;
							}
						} else {
							days[c].acts = 0;
						}
					}
					// }
				 	}
				 }
			   this.datalistYear = yearData;
				 // this.$forceUpdate();
		},
			
		// 初始加载数据
		initGetAllYear(beginTime,endTime) {
			uni.showLoading({
				title:'加载中',
				mask:true,
			});
			getPlanAndSignDates({
				beginTime,
				endTime,
				type:this.strNums === 2 || this.strNums === 3 ? 1 : 2,
				elevatorId:this.objInfo.elevatorId || '',
				planId:this.objInfo.planId || ''
			}).then(res=>{
				if (res.code === 200) {
					uni.hideLoading();
					let resYearData = res.data || [];
					this.allYearData = resYearData;
					let plandInitDate = '';
					let plandCurrDate = '';
					let yearData = this.datalistYear;
						 console.log('加载....',this.datalistYear);
					// 遍历对应日期显示文本和状态
					for (let i = 0; i < yearData.length; i++) {// 年
						let yearDay = yearData[i].yearDay || [];
						for (let j = 0; j < yearDay.length; j++) {// 月
							let days = yearDay[j] || [];
							for (let c = 0; c < days.length; c++) {// 日
								for (let b = 0; b < resYearData.length; b++) {
									let signDate = resYearData[b].signDate.substring(0,10).replace(/[-]/g,'/');
									if (signDate === days[c].date) {
										// console.log(signDate,"对了了了了",days[c].date)
										days[c].holiday = resYearData[b].holiday;
										days[c].planTypeName = resYearData[b].planTypeName;
										days[c].planTypeNames = resYearData[b].planTypeNames;
										days[c].historyPlan = resYearData[b].historyPlan;
										days[c].isSelect = resYearData[b].isSelect;
									}
									if (days[c].historyPlan === 1) {
										plandInitDate = days[c].date;
									}
									if (days[c].historyPlan === 2) {
										plandCurrDate = days[c].date;
									}
								}
							}
						}
					}
					this.plandInitDate = plandInitDate;
					this.plandCurrDate = plandCurrDate;
					this.$forceUpdate();
				}
			});
		},
			
		// 验证确认
		submitComfire() {
			if (!this.subMitDate) {
				uni.showToast({
					title: '请选择日期',
					icon: 'none'
				});
				return; 
			}
				
			if (this.objData.defertDesc.length <= 0) {
				uni.showToast({
					title: '请输入原因',
					icon: 'none'
				});
				return; 
			}
			if (this.imgUrls.length <= 0) {
				uni.showToast({
					title: '请添加图片',
					icon: 'none'
				});
				return;
			}
			this.$refs.deferredPopup.open();
		},
		// 提交数据确定
		rescueComfire() {
			uni.showLoading({
				title:'提交中',
				mask:true,
			});
			this.objData.defertImg = this.imgUrls.map(item=>item.url).join(',');
			this.objData.planDate = this.subMitDate.replaceAll('/', '-') + ' 00:00:00';
			// this.objData.planDate = formatTime(new Date().getTime() + 24 * 60 * 60 * 1000)+" 00:00:00"
			addAnnualSave(this.objData).then(res=>{
				if (res.code === 200) {
					uni.hideLoading();
					uni.showToast({
						title: '日期调整成功',
						icon: 'none'
					});
					setTimeout(()=>{
						this.$refs.deferredPopup.close();
						uni.navigateBack({
							delta: 1
						});
					},1000);
				}
			});
		},
		// 弹窗确定
		submitYearDate() {
			if (!this.currDate) {
				uni.showToast({
					title: '请选择日期',
					icon: 'none'
				});
				return; 
			}
			this.subMitDate = this.currDate;
			this.$refs.calendarPopup.close();
		},
		// 限制今天以前日期
		beforeToday(str) {
			  let d = new Date(str.replace(/-/g, '/'));
			  let todaysDate = new Date();
			  if (d.setHours(0, 0, 0, 0) < todaysDate.setHours(0, 0, 0, 0)) {
				return true;
			  } else {
				return false;
			  }
		},
			
		splitProcessor(tagsStr,splitStr) {
			return tagsStr ? tagsStr.split(splitStr) : [] ;
		},
		 
		closeModal() {
			this.showTaskExistsTipsPoup = false;
		}
	}
};
</script>
<style>
	page{
		background: #f3f6f8;
	}
</style>
<style lang="scss" scoped>
	%widthPage{
		width: 710rpx;
		margin: 0 auto;
	}
	@mixin fontColors($px,$count,$colour) {
		font-size: $px;
		font-weight: $count;
		color: $colour;
	}
	.warnings{
		padding-left: 25rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #f7e5e5;
		font-size: 26rpx;
		font-weight: 400;
		color: #e02020;
		text-align: left;
		text{
			// vertical-align: middle;
		}
		image{
			width: 28rpx;
			height: 28rpx;
			vertical-align: middle;
		}
	}
	.wrap_edit{
		width: 710rpx;
		margin: 0 auto;
		
		.top_text{
			display: flex;
			flex-direction: row;
			margin-bottom: 20rpx;
			margin-top: 20rpx;
			.text_L{
				flex: 0 0 90rpx;
				font-size: 24rpx;
				color: #666;
				image{
					width: 32rpx;
					height: 32rpx;
					vertical-align: bottom;
				}
			}
			.text_R{
				flex: 1;
				font-size: 24rpx;
				color: #666;
				.text_year{
					display: inline-block;
					font-size: 24rpx;
					color: #666;
					border-left: 2rpx #ccc solid;
					border-right: 2rpx #ccc solid;
					padding: 0 10rpx;
					margin: 0 10rpx;
				}
			}
		}
		.calendar_tp{
			border-radius: 8rpx;
			background-color: #FFFFFF;
			padding: 20rpx;
			.calendar_title{
				display: flex;
				flex-direction: row;
				// margin-top: 20rpx;
				view:nth-of-type(1){
					flex: 1;
					font-size: 30rpx;
					color: black;
					font-weight: 700;
				}
				view:nth-of-type(2){
					flex: 1;
					font-size: 24rpx;
					color: #ccc;
					text-align: right;
					.actTextRed{
						color:#e02020;
					}
					.actTextblue{
						color:#0091ff;
					}
					text{
						vertical-align: middle;
						margin-right: 10rpx;
					}
					image{
						width: 32rpx;
						height: 32rpx;
						vertical-align: middle;
					}
				}
			}
			.calendar_pland{
				background: #f8f8f8;
				border-radius: 8rpx;
				 margin-top: 20rpx;
				.pland_date{
					padding-top: 20rpx;
					display: flex;
					justify-content: center;
					text-align: center;
					font-size: 26rpx;
					font-weight: 400;
					color: #666666;
					view:nth-of-type(1){
						flex: 1;
						text{
							display: block;
						}
					}
					view:nth-of-type(2){
						flex: 1;
						text{
							display: block;
						}
					}
				}
				.pland_change{
					margin-top: 20rpx;
					margin-left: 20rpx;
					font-size: 26rpx;
					color: #333333;
					view:nth-of-type(1){
						margin-bottom: 10rpx;
						text:nth-of-type(2){
							color: #0091ff;
							margin-left: 10rpx;
						}
					}
					view:nth-of-type(2){
						padding-bottom: 20rpx;
						text:nth-of-type(2){
							color: #0091ff;
							margin-left: 10rpx;
						}
					}
				}
				
			}
		}
		
		.calendar_reason{
			border-radius: 16rpx;
			background-color: #FFFFFF;
			margin-top: 20rpx;
			.reason_remarks{
				padding: 20rpx;
				.titleMax{
					@include fontColors(30rpx,700,#333333);
					margin-bottom: 15rpx;
				}
				.title{
					margin-bottom: 15rpx;
				}
				.remarks{
					width: 94%;
					padding: 20rpx;
					height: 208rpx;
					border: 2rpx solid #e9e9e9;
					border-radius: 4rpx;
					position: relative;
					padding-bottom: 30rpx;
					textarea {
						font-size: 28rpx;
						width: 100%;
						height: 208rpx;
					}
					.length {
						text-align: right;
						color: #ccc;
						position: absolute;
						right: 10rpx;
						font-size: 2;
						font-size: 24rpx;
						bottom: 5rpx;
					}
				}
			}
			.reason_img{
				padding: 20rpx;
				.parts_img{
					margin-top: 20rpx;
				}
			}
		}
		
	}
	.calendarEdit{
		background-color: #fff;
		min-height: 1000rpx;
		border-radius: 8rpx 8rpx 0rpx 0rpx;
		position: relative;
		z-index: 300;
		.edit_bor {
			width: 100%;
			padding: 20rpx 0;
			.down-btn {
				width: 64rpx;
				height: 10rpx;
				background: #d8d8d8;
				border-radius: 6rpx;
				margin: 0 auto;
			}
		}
		.edit_select{
			width: 680rpx;
			margin: 0 auto;
			.select_tit{
				@include fontColors(32rpx,600,#333333);
				margin-bottom: 20rpx;
			}
			.select_text{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				@include fontColors(32rpx,600,#333333);
				margin-bottom: 20rpx;
				
			}
			.select_plan{
				display: flex;
				flex-direction: row;
				background: #f8f8f8;
				border-radius: 8rpx;
				padding: 20rpx;
				margin-bottom: 10rpx;
				@include fontColors(26rpx,400,#333333);
				view:nth-of-type(1){
					flex: 1;
				}
				view:nth-of-type(2){
					flex: 0 0 290rpx;
					text-align: left;
				}
			}
			.select_LR{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				@include fontColors(24rpx,400,#333333);
				
				.R_radio{
					margin-right: 30rpx;
					display: flex;
					flex-direction: row;
					view:nth-of-type(2){
						margin-left: 10rpx;
					}
				}
				
			}
		}
		.select_yearM{
			padding: 0 40rpx;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(162,162,162,0.19); 
			margin-bottom: 15rpx;
			.yearM_tit{
				@include fontColors(30rpx,600,#333333);
				display: flex;
				justify-content: center;
			}
			.yearM_week{
				display: flex;
				justify-content: center;
				.weeks{
					
					flex: 1;
					text-align: center;
					@include fontColors(24rpx,400,#999);
					margin: 10rpx 0;
				}
			}
		}
		.bottSub{
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
		}
		.scrollY{
			height: 770rpx;
		}
	}
	
	.popup {
		padding: 24rpx 28rpx 0 28rpx;
		box-sizing: border-box;
		background-color: #fff;
		width: 580rpx;
		border-radius: 24rpx;
		z-index: 300;
		.title {
			color: #000;
			font-size: 32rpx;
			font-weight: 600;
			padding-bottom: 20rpx;
			text-align: center;
		}
		.content {
			text-align: center;
			color: #333;
			margin-bottom: 38rpx;
			.delay_detail {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text{
					// display: inline-block;
					font-size: 24rpx;
					color: #666;
				}
				.text_year{
					font-size: 24rpx;
					border-left: 2rpx #ccc solid;
					border-right: 2rpx #ccc solid;
					padding: 0 10rpx; 
					margin: 0 10rpx;
				}
			}
			.delay_date {   
				margin: 15rpx 0;
				font-size: 28rpx;
				.date_text{
					@include fontColors(28rpx,600,#333333);
				}
				.date_s{
					@include fontColors(28rpx,600,#000);
					text{
						font-size: 28rpx;
						color: #0091ff;
						font-weight: 400;
					}
					
				}
				
			}
			
		}
		.bottom {
			display: flex;
			border-top: 2rpx solid #f5f5f5;
			height: 76rpx;
	
			view {
				display: flex;
				flex: 1;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #999;
			}
			.comfire {
				color: #0091ff;
				border-left: 2rpx solid #f5f5f5;
			}
		}
	}
	
	.BA_item_botm{
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    // z-index: 9;
	    height: 98rpx;
	    display: flex;
	    align-items: center;
	    width: 100%;
	    background: #fff;
		.botm{
			width: 720rpx;
			margin: 0 auto;
			height: 70rpx;
			background: #0091ff;
			border-radius: 8rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
		}
		.botms{
			background: #efefef;
		}
	}
	.calendar_btt{
		position: absolute;
		z-index: 99;
	}

	.taskExistsPopupTitle {
		text-align: left;
		font-size: 14px;
		color: #999;
	}

	.taskExistsView{
		max-height: 230rpx;
		background: #f9f9f9;
		border-radius: 8rpx; 
	}

	.taskExistsPopupContent{
		display: flex;
		flex-direction: row;
		padding: 16rpx; 
		color:#333;
		border-bottom: 2rpx solid #eeeeee;
		justify-content: flex-start;
		align-items: flex-start;

		&:last-child{
			border-bottom: none !important;
		}

		.label{
			text-align: center;
			width: max-content;
			font-size: 24rpx;
			margin-right:16rpx;
			color: #666666;
			line-height: 32rpx;
			height: 32rpx;
			padding-top:4rpx;
			padding-bottom:4rpx;
		}

		.data{ 
			flex: 1;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 12rpx;
		}

		.tag {
			border: 2rpx solid #cccccc;
			border-radius: 20rpx;
			font-weight: Regular;
			text-align: left;
			color: #666666;
			font-size: 24rpx;
			line-height: 32rpx;
			padding-right:12rpx;
			padding-left:12rpx;
			padding-top:2rpx;
			padding-bottom:2rpx;
		}
	}
.whitespace-nowrap{
  white-space: nowrap;
}
</style>
